import { Routes, Route, Navigate } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { RootState } from './store'
import Layout from './components/Layout'
import Login from './pages/Auth/Login'
import Register from './pages/Auth/Register'
import Home from './pages/Home'
import CourseList from './pages/Course/CourseList'
import CourseDetail from './pages/Course/CourseDetail'
import CoursePlayer from './pages/Course/CoursePlayer'
import MyCourses from './pages/Student/MyCourses'
import Profile from './pages/User/Profile'
import TeacherDashboard from './pages/Teacher/Dashboard'
import AdminDashboard from './pages/Admin/Dashboard'
import Discussion from './pages/Discussion'

function App() {
  const { isAuthenticated } = useSelector((state: RootState) => state.auth)

  return (
    <Routes>
      {/* 公开路由 */}
      <Route path="/login" element={<Login />} />
      <Route path="/register" element={<Register />} />

      {/* 主要布局 */}
      <Route path="/" element={<Layout />}>
        <Route index element={<Home />} />
        <Route path="courses" element={<CourseList />} />
        <Route path="courses/:id" element={<CourseDetail />} />
        <Route path="discussion" element={<Discussion />} />
        
        {/* 需要登录的路由 */}
        <Route
          path="courses/:id/learn"
          element={isAuthenticated ? <CoursePlayer /> : <Navigate to="/login" />}
        />
        <Route
          path="my-courses"
          element={isAuthenticated ? <MyCourses /> : <Navigate to="/login" />}
        />
        <Route
          path="profile"
          element={isAuthenticated ? <Profile /> : <Navigate to="/login" />}
        />
        <Route
          path="teacher/*"
          element={isAuthenticated ? <TeacherDashboard /> : <Navigate to="/login" />}
        />
        <Route
          path="admin/*"
          element={isAuthenticated ? <AdminDashboard /> : <Navigate to="/login" />}
        />
      </Route>
    </Routes>
  )
}

export default App
